<script setup>
import { ref } from 'vue';
import Footer from './Footer.vue';
import Header from './Header.vue';
import Container from './Container.vue';
import Modal from './popup/Modal.vue'; // 引入弹窗组件

const isModalVisible = ref(false); // 控制弹窗显示的状态

const openModal = () => {
  isModalVisible.value = true;
};
</script>

<template>
  <div class="home-container">
    <img src="../img/10054.jpg" alt="打开弹窗" class="open-modal-img" @click="openModal">
  </div>
    <!-- 弹窗组件 -->
    <Modal :isVisible="isModalVisible" @update:isVisible="isModalVisible = $event" />
  <!-- 打开弹窗的按钮 -->
  <!-- <button @click="openModal">打开弹窗</button> -->


  <!--头部（包含轮播图）-->
  <Header />
  <!--内容区域-->
  <Container />
  <!--底部区域-->
  <Footer />
</template>

<style scoped>
.home-container {
  position: relative; /* 使子元素的绝对定位相对于此容器 */
}
/* 固定在左上角的图片样式 */
.open-modal-img {
  position: fixed; /* 固定定位 */
  top: 100px; /* 距离顶部20px */
  right: -10px; /* 距离左侧20px */
  width: 100px; /* 图片宽度 */
  height: 150px; /* 图片高度 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
  z-index: 1000; /* 确保图片在其他内容之上 */
  object-fit: contain; /* 保持图片比例并适应容器 */
}
</style>
